<template>
  <div class="wt-date-time">
    <div class="time">{{hour}}:{{minute}}</div>
    <div class="date">
      <div class="big">{{month}}月{{day}}日</div>
      <div class="other">{{year}}年 {{currentWeek}}</div>
    </div>
  </div>
</template>

<script>
import TimeUpdate from '@/modules/corejs/time/time-update'
import dateParse from './base/date-parse'

let timeUpdate = new TimeUpdate()

function numfill (number) {
  if (number < 10) {
    return '0' + number
  }
  return number
}

export default {
  name: 'weather1',
  props: ['cityName'],
  data () {
    return {
      rank: {},
      hour: '00',
      minute: '00',

      year: '',
      month: '',
      day: '',
      currentWeek: ''
    }
  },
  created () {
    timeUpdate.start(() => {
      let d = new Date()
      this.hour = numfill(d.getHours())
      this.minute = numfill(d.getMinutes())
      let { year, month, day, weekZh } = dateParse(d)
      this.year = year
      this.month = month
      this.day = day
      this.currentWeek = '星期' + weekZh
    }, 1000 * 60)
  },
  destroyed () {
    timeUpdate.stop()
  }
}
</script>

<style scoped>
  /* .wt-date-time { color: #666; } */
  /* .wt-date-time[v-cloak] { position: relative; height: 100%; overflow: hidden; } */
  /* .wt-date-time[v-cloak]:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #21acce; } */
  .wt-date-time .date { float: right; }
  .wt-date-time .date .big { font-size: 48px; padding: 12px 0 6px; }
  .wt-date-time .date .other { font-size: 32px; }
  .wt-date-time .time { float: left; font-size: 72px; line-height: 1.7; padding: 0 24px; }
</style>
